<template>
	<div>
		<el-form ref="form" :model="user" :rules="rules">
			<h2 style="text-align: center">GRTS-MMS</h2>
			<el-form-item prop="username">
				<el-input v-model="user.username" placeholder="账号"></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input
					v-model="user.password"
					placeholder="密码"
					type="password"
					show-password
				></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="handleLogin" type="primary" style="width: 100%"
					>登录</el-button
				>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	data() {
		return {
			user: {
				username: "",
				password: "",
			},
			rules: {
				username: [{ required: true, message: "请输入账号", trigger: "blur" }],
				password: [{ required: true, message: "请输入密码", trigger: "blur" }],
			},
		};
	},
	methods: {
		handleLogin() {
			this.$refs.form.validate((valid) => {
				if (!valid) {
					return this.$message.error("登陆失败，请检查账号和密码");
				}
				this.axios.post("/user/login", this.user)
				.then((resp) => {
					this.$store.commit("setCurrentUser", resp.data);
					this.$router.push("/home");
				})
				.catch(() => {
					this.$message.error("登陆失败，请检查账号和密码");
				});
			});
		},
	},
};
</script>
    
<style scoped>
form {
	width: 400px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
</style>